CSS Sprite

2018-07-17

简介

css雪碧（精灵）是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，利用css的背景定位来显示需要的部分，即background-position：x y；

原理

把网站上需要用到的图片整合到一张单独的图片中，从而减少网站的http请求数量，其中，图片是在CSS中定义。

优点

1. 减少加载网页图片时对服务器的请求次数

提高页面的加载速度

代码实现

<!-- html实现-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BOM</title>
</head>
<body>
<div class="cat">
	<ul>
		<li class="cat-1">
			<i></i>
			<h3>服饰内衣</h3>
		</li>
		<li class="cat-2">
			<i></i>
			<h3>鞋包配饰</h3>
		</li>
		<li class="cat-3">
			<i></i>
			<h3>运动户外</h3>
		</li>
		<li class="cat-4">
			<i></i>
			<h3>珠宝手表</h3>
		</li>
		<li class="cat-5">
			<i></i>
			<h3>手机数码</h3>
		</li>
		<li class="cat-6">
			<i></i>
			<h3>家电办公</h3>
		</li>
		<li class="cat-7">
			<i></i>
			<h3>护肤彩妆</h3>
		</li>
		<li class="cat-8">
			<i></i>
			<h3>母婴用品</h3>
		</li>
	</ul>
</div>
</body>
</html>

<!-- css实现-->
    h3 ul{
		margin: 0;
		padding: 0;
	}
	h3{
		display: block;
		margin: 0;
		padding: 0;
	}
	.cat{
		position: relative;
		width:150px;
		background:#f8f8f8;
		border:1px solid #bbb;
	}
	ul{
		list-style: none;
	}
	li{
		z-index: 2;
		position: relative;
		display: block;
		height:31px;
		line-height: 31px;
		overflow: hidden;
		//margin:1px 10px 0;
		vertical-align: bottom;
		border-bottom: 1px solid #dedede;
	}
	li:hover{
		background-color: #666666;
	}
	li h3{
		font-size: 14px;
		font-weight: 400;
	}
	li i{
		display: inline;
		float: left;
		margin: 3px 10px 0 0;
		height: 24px;
		width: 30px;
	}

	li > i{
		background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
	}

	.cat-2 > i{
		background-position: 0 -24px;
	}
	.cat-3 > i{
		background-position: 0 -48px;
	}
	.cat-4 > i{
		background-position: 0 -72px;
	}
	.cat-5 > i{
		background-position: 0 -96px;
	}
	.cat-6 > i{
		background-position: 0 -120px;
	}
	.cat-7 > i{
		background-position: 0 -144px;
	}
	.cat-8 > i{
		background-position: 24px -168px;
	}